<template>
  <div>
    <el-form class="form">
      <div class="head">
        <el-input
          class="elinput"
          placeholder="根据关键字查询课程"
          v-model="input"
          clearable
        >
        </el-input>
        <el-button
          class="elbut"
          type="primary"
          icon="el-icon-search"
          @click="search"
          >搜索</el-button
        >
        <el-button
          type="primary"
          class="crebut"
          icon="el-icon-plus"
          @click="add"
          >添加</el-button
        >
        <!-- <el-button type="danger" class="debut" icon="el-icon-delete"
        @click="sahnchu"
          >删除</el-button
        > -->
        <div class="clear"></div>
      </div>
      <el-table
        id="cent"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 65%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="60%"></el-table-column>
        <el-table-column :index="handleIndex" type="index" label="序号" width="120">
        </el-table-column>
        <el-table-column prop="sname" label="课程" width="200">
        </el-table-column>
        <el-table-column label="操作" width="170">
          <template slot-scope="scope">
            <!-- <el-button type="text" size="small">查看</el-button> -->
            <el-button
              type="text"
              size="small"
              @click="bianji(scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
        <div class="block">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="list.page"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="list.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="list.total"
          ></el-pagination>
        </div>
      <!-- 修改 -->
      <el-dialog
        title="修改课程"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-form-item label="课程：">
          <el-input v-model="ipt" style="width: 350px" clearable></el-input>
        </el-form-item>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm()">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 添加 -->
      <el-dialog
        title="添加课程"
        :visible.sync="dialogVisibles"
        width="30%"
        :before-close="handleClose"
      >
        <el-form-item label="课程：">
          <el-input v-model="ipts" clearable></el-input>
        </el-form-item>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibles = false">取 消</el-button>
          <el-button type="primary" @click="addss()">确 定</el-button>
        </span>
      </el-dialog>
    </el-form>
  </div>
</template>
<script>
import home from "../../api/home";
import qtype from "../../api/qtype"
export default {
  data() {
    return {
      dialogVisibles: false,
      dialogVisible: false,
      ipts: "",
      ipt: "",
      input: "",
      sids:'',
      tableData: [],
      shanchu:[],
      list:{
        total:0, // 总页数
        pageTotal:0, 
        page:0,
        pageSize:0,
      },
    };
  },
  computed: {
    // 累加计算序号
    handleIndex() {
      return this.list.pageSize * (this.list.page - 1) + 1;
    },
  },
  created() {
    this.getQid();
  },
  methods: {
    // 添加
    add() {
      this.dialogVisibles = true;
    },
    getQid() {
      home
        .ke()
        .then((res) => {
          console.log(res.data.list);
          this.list = {
            total: Number(res.data.list.total), // 总页数
            pageTotal:res.data.list.pageTotal, 
            page:res.data.list.page,
            pageSize:res.data.list.pageSize,
          }
          this.tableData = res.data.list.list;

        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    },
    // 分页
    handleSizeChange(val){
      // console.log(`每页 ${val} 条`);
      this.list.pageSize = val
      qtype.subjectpgetlist(val).then(res=>{
        this.tableData = res.data.list.list
      }).catch(error=>{
        console.log(error)
      })
    },
    handleCurrentChange(val){
      // console.log(`当前页: ${val}`);
      this.list.page = val
      qtype.subjectpgetlists(val,this.list.pageSize).then(res=>{
        this.tableData = res.data.list.list
      }).catch(error=>{
        console.log(error)
      })
    },
    handleSelectionChange(e) {
      this.shanchu = e
      // console.log(this.shanchu);
    },
    // 删除
    sahnchu(){
      // console.log(this.shanchu)
      // for(var i=0;i<this.shanchu.length;i++){
        
      // }
    },
    // 添加确定
    addss() {
      // console.log(this.ipts);
      const sname = {
        sname:this.ipts
      }
      // console.log(JSON.stringify(sname))
      qtype.subjectpost(sname).then((res)=>{
        if(res.data.code === 20000){
          alert(res.data.msg)
          this.getQid()
          this.dialogVisibles = false;
          this.ipts = ''
        }else{
          alert(res.data.msg)
          this.dialogVisibles = false;
        }
      }).catch(error=>{
        console.log(error)
      })
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    // 查询
    search() {
      if(this.input == ''){
        this.getQid()
      }else{
       qtype.subjectpget(this.input).then(res=>{
         console.log(res)
         this.tableData = res.data.list;
       })        
      }
      // console.log(this.input)
    },
    del(row) {
      home
        .del(row.qid)
        .then(() => {
          this.$message({
            message: "恭喜你，删除成功",
            type: "success",
          });
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    },
    bianji(v) {
      // console.log(v);
      this.ipt = v.sname;
      this.sids = v.sid
      this.dialogVisible = true;
    },
    // 修改sid
    submitForm() {
      // console.log(this.ipt);
      const sname = {
        sname:this.ipt,
        sid:this.sids
      }
      // console.log(sname)
      qtype.subjectupdate(sname).then(res=>{
        if(res.data.code === 20000){
          this.getQid()
          this.dialogVisible = false;
        }
      }).catch(error=>{
        console.log(error)
      })
    },
  },
};
</script>
<style scoped>
.form {
  width: 90%;
  height: 600px;
  /* background-color: red; */
  margin: auto;
}
.head {
  width: 55%;
  margin-left: 18%;
  /* background-color: royalblue; */
}
#cent {
  margin: auto;
}
#ipt1 {
  width: 200px;
}
.elbut {
  float: left;
  margin-top: 20px;
}
.elinput {
  float: left;
  width: 40%;
  margin-right: 20px;
  margin-top: 20px;
}
.crebut {
  float: left;
  margin-bottom: 30px;
  margin-top: 20px;
}
.debut {
  float: left;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-top: 20px;
}
.clear {
  clear: both;
}
.block {
  margin-top: 20px;
  float: right;
}
</style>